<template>
  <div class="author-card">
    <Avatar
      :size="64"
      :icon="author.initials"
      :src="author.avatar"
      :style="{ marginBottom: '16px' }"
    />
    <h3>{{ author.name }}</h3>
    <p>{{ author.title }}</p>
    <div class="social-links">
      <a
        :href="contact.href"
        target="_blank"
        rel="noopener noreferrer"
        class="social-icon"
        v-for="contact in showContact"
        :key="contact.type"
      >
        <component :title="contact.type" :is="getContactIcon(contact.type)" />
      </a>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { Avatar } from "ant-design-vue";
import { useBlogStore } from '../stores/blog';

// 使用 Pinia store
const blogStore = useBlogStore();

// 博主信息
const author = ref({
  name: "Gulu Blog",
  title: "前端开发工程师",
  description: "专注于Vue.js生态系统开发，热衷于分享前端技术和最佳实践。",
  avatar: "GB",
  initials: "GB",
  contact: [],
});
const showContact = computed(() => {
  return author.value.contact.filter(contact => contact.visible)
})
const getContactIcon = (type) => {
  const typeMap = {
    phone: "PhoneOutlined",
    email: "MailOutlined",
    github: "GithubOutlined",
    gitee: "GithubOutlined",
    linkedin: "LinkedinOutlined",
    twitter: "TwitterOutlined",
    wechat: "WechatOutlined",
    Weibo: "WeiboCircleOutlined",
    zhihu: "ZhihuOutlined",
    qq: "QqOutlined",
  };
  return typeMap[type] || null;
};

// 获取博主信息
const fetchAuthorInfo = async () => {
  try {
    const data = await blogStore.getPersonalInfo();
    if (data) {
      author.value = {
        ...author.value,
        ...data,
        avatar: import.meta.env.VITE_API_BASE_URL + data.avatar || "GB",
      };
    }
  } catch (error) {
    console.error("获取博主信息失败:", error);
  }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchAuthorInfo();
});
</script>

<style scoped>
.author-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.author-card h3 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.author-card p {
  margin: 0 0 16px 0;
  color: #666;
  font-size: 0.9rem;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.social-icon {
  color: #666;
  font-size: 20px;
  transition: color 0.3s ease;
}

.social-icon:hover {
  color: #1890ff;
}
</style>uhoduhcad16c01890